<template>
    <view class="page bg-white">
        <cu-custom bgColor="bg-gradual-green" :isBack="true">
            <block slot="content">编程代码</block>
            <block slot="backText">返回</block>
        </cu-custom>
        <view class="flex padding align-center">
            <view class="inline-flex justify-center margin-right-xs">
                <view class="cu-tag round" :class="'bg-'+statusColor">{{statusText}}</view>
            </view>
            <view class="bg-white flex-twice">
                <view class="cu-progress radius striped active">
                    <view :class="'bg-'+statusColor" :style="[{ width:loading?progressPercent:''}]">{{scorePercent}}</view>
                </view>
            </view>
        </view>
        <view class="padding-tb-sm padding-left-sm">
            <rich-text :selectable="true" :nodes="code"></rich-text>
        </view>
    </view>
</template>

<script>
import {
    getSubmissonCode,
    rawCodeToHtml
} from './request';
import {
    toPercent
} from './program';


export default {
    onLoad(options) {
        this.course_id = JSON.parse(options.course_id);
        this.lesson = JSON.parse(decodeURIComponent(options.lesson));
        console.log('program', this.lesson);
        getSubmissonCode(this.course_id, this.lesson.chapter_lesson_id).then((res) => {
            this.rawCode = res;
        });
        setTimeout(() => {
            this.loading = true;
        }, 500);
    },
    data() {
        return {
            course_id: 0,
            lesson: null,
            rawCode: '',
            loading: false,
        };
    },
    methods: {},
    computed: {
        code: function() {
            // TODO修改为后端获取的代码
            return rawCodeToHtml(this.rawCode);
        },
        statusText: function() {
            if (this.lesson) {
                return (this.lesson.status == -1) ? '未完成' : '已完成';
            } else {
                return '';
            }
        },
        statusColor: function() {
            if (this.lesson) {
                return (this.lesson.status == -1) ? 'red' : 'green';
            } else {
                return 'green';
            }
        },
        progressPercent: function() {
            if (this.lesson) {
                return toPercent(this.lesson.user_score / this.lesson.score, 0, 7);
            } else {
                return '0%';
            }
        },
        scorePercent: function() {
            if (this.lesson) {
                return toPercent(this.lesson.user_score / this.lesson.score, 0, 0);
            } else {
                return '0%';
            }
        }
    }
};
</script>

<style>
    .page {
        width: 100%;
        height: 100%;
    }

    rich-text .prog-code {
        counter-reset: line-number;
    }

    rich-text .prog-ul {
        list-style: none;
        padding: 0;
    }

    rich-text .prog-list::before {
        content: counter(line-number);
        counter-increment: line-number;
        color: rgb(74, 143, 172);
        width: 2em;
        display: inline-block;
    }

    rich-text .prog-wrap::before {
        content: '';
        width: 1.6em;
        display: inline-block;
    }

    rich-text .prog-list,
    .prog-wrap {
        background-color: rgb(250, 250, 250);
    }
</style>
